<template>
	<view class="my">
		<view class="topEa padding">
			<view class="topEaBg"></view>
			<view class="text-right text-sm" @click="goto('/pages/my/set/index')">
				<view class="cuIcon-settings text-white" style="font-size: 50rpx;"></view>
				<view class="text-white">设置</view>
			</view>
			<view class="flex text-white">
				<!-- <image class="cu-avatar round lg" mode="aspectFill" :src="userInfo.avatar"></image> -->
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
				<view class="margin-left">
					<view>昵称:{{userInfo.nickName}}</view>
					<view class="margin-top-sm">手机号： {{userInfo.phonenumber}}</view>
				</view>
			</view>
		</view>
		
		<view class="padding">
			<view class="bg-white myRadius">
				<view class="cu-list grid" :class="['col-2',gridBorder?'':'no-border']">
					<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<2*2">
						<view class="text-xxl text-bold" :class="['text-' + item.color]">
							{{item.num}}
						</view>
						<text class="text-bold">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="margin-top bg-white myRadius">
				<view class="cu-list menu">
					<view class="cu-item arrow">
						<view class="text-bold">我的订单</view>
						<view @click="goto('/pages/my/order/index')">查看全部</view>
					</view>
				</view>
				<view class="flex padding justify-between text-center">
					<view>
						<view>
							<image class="iconImg" :src="config.url + '/wx/zcb/19.png'" mode="aspectFit"></image>
						</view>
						<view @click="goto('/pages/my/order/index')">全部订单</view>
					</view>
					<view>
						<view>
							<image class="iconImg" :src="config.url + '/wx/zcb/20.png'" mode="aspectFit"></image>
						</view>
						<view @click="goto('/pages/my/order/index')">未发货</view>
					</view>
					<view>
						<view>
							<image class="iconImg" :src="config.url + '/wx/zcb/21.png'" mode="aspectFit"></image>
						</view>
						<view @click="goto('/pages/my/order/index')">已发货</view>
					</view>
					<view>
						<view>
							<image class="iconImg" :src="config.url + '/wx/zcb/23.png'" mode="aspectFit"></image>
						</view>
						<view @click="goto('/pages/my/order/index')">已完成</view>
					</view>
				</view>
			</view>
			<view class="margin-top bg-white padding">
				<view class="text-bold">常用服务</view>
				<view class="flex padding-tb justify-between text-center">
					<view @click="goto('/pages/my/team/index')">
						<view class="cuIcon-friend text-orange" style="font-size: 60rpx;"></view>
						<view>我的团队</view>
					</view>
					<view @click="goto('/pages/my/share/index')">
						<view class="cuIcon-share text-orange" style="font-size: 60rpx;"></view>
						<view>分享</view>
					</view>
					<view>
						<view class="cuIcon-service text-orange" style="font-size: 60rpx;"></view>
						<view>
							<button class="myBtn" open-type='contact' @click="contact" >联系客服</button>
						</view>
					</view>
					<view>
						<view class="cuIcon-album text-orange" style="font-size: 60rpx;"></view>
						<view>帮助中心</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import config from "../../config.js"
	import loginApi from "../../api/new/login.js"
	export default{
		data() {
			return {
				config: config,
				gridBorder: "",
				userInfo: "",
				userScoreInfo: "",
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					num: 120,
					name: '昨日收益'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					num: 1,
					name: '累计收益'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					num: 0,
					name: '未解绑收益'
				}, {
					cuIcon: 'noticefill',
					num: 'olive',
					badge: 22,
					name: '可用收益'
				}],
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.getUserScore()
		},
		methods: {
			getUserScore() {
				loginApi.getUserScore().then(res => {
					console.log("res", res)
					this.userScoreInfo = res.user
					this.cuIconList[0].num = res.user.integralYestoday || 0
					this.cuIconList[1].num = res.user.integral || 0
					this.cuIconList[2].num = res.user.integralBind || 0
					this.cuIconList[3].num = res.user.integralUse || 0
				})
			}
		}
	}
</script>

<style lang="scss">
	.my{
		.topEa{
			// background-image: url("");
		}
		.topEaBg{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 300rpx;
			background-image: url(@/static/newVer/my/bg.png);
			background-size: 100% 100%;
			transform: scaleY(1.5);
			z-index: -1;
		}
		.topEa{
		}
		.myRadius{
			border-radius: 10rpx; overflow: hidden;
		}
		.iconImg{
			width: 50rpx;
			height: 50rpx;
		}
		.myBtn{
			border: 0;
			padding: 0;
			margin: 0;
			font-size: 14px;
			height: 20px;
			line-height: 20px;
			vertical-align: middle;
			color: #666666;
			background-color: white;
			&:after{
				padding: 0;
				margin: 0;
				border: 0;
			}
		}
	}
</style>